<template>
  <view class="inventory-page">
    <!-- 页面头部 -->
    <view class="page-header">
      <text class="page-title">背包管理</text>
      <text class="page-subtitle">管理你的物品和资源</text>
    </view>
    
    <!-- 背包统计 -->
    <view class="inventory-stats">
      <view class="stat-item">
        <text class="stat-number">{{ totalItems }}</text>
        <text class="stat-label">物品总数</text>
      </view>
      <view class="stat-item">
        <text class="stat-number">{{ usedSlots }}/{{ maxSlots }}</text>
        <text class="stat-label">使用槽位</text>
      </view>
      <view class="stat-item">
        <text class="stat-number">{{ inventoryValue }}</text>
        <text class="stat-label">总价值</text>
      </view>
    </view>
    
    <!-- 分类筛选 -->
    <view class="filter-tabs">
      <view 
        class="filter-tab" 
        :class="{active: currentFilter === 'all'}"
        @click="setFilter('all')"
      >
        <text>全部</text>
      </view>
      <view 
        class="filter-tab" 
        :class="{active: currentFilter === 'resources'}"
        @click="setFilter('resources')"
      >
        <text>资源</text>
      </view>
      <view 
        class="filter-tab" 
        :class="{active: currentFilter === 'tools'}"
        @click="setFilter('tools')"
      >
        <text>工具</text>
      </view>
      <view 
        class="filter-tab" 
        :class="{active: currentFilter === 'food'}"
        @click="setFilter('food')"
      >
        <text>食物</text>
      </view>
    </view>
    
    <!-- 背包网格 -->
    <view class="inventory-grid">
      <view 
        class="inventory-slot" 
        v-for="(item, index) in filteredItems" 
        :key="index"
        @click="selectItem(item, index)"
        :class="{selected: selectedItem === index}"
      >
        <view class="slot-content">
          <text class="item-icon">{{ item.icon }}</text>
          <text class="item-name">{{ item.name }}</text>
          <text class="item-count" v-if="item.count > 1">×{{ item.count }}</text>
          <text class="item-value">{{ item.value }}</text>
        </view>
        <view class="slot-overlay" v-if="selectedItem === index">
          <view class="slot-actions">
            <button class="action-btn use-btn" @click.stop="useItem(item)">使用</button>
            <button class="action-btn drop-btn" @click.stop="dropItem(item, index)">丢弃</button>
          </view>
        </view>
      </view>
      
      <!-- 空槽位 -->
      <view 
        class="inventory-slot empty-slot" 
        v-for="n in emptySlots" 
        :key="'empty-' + n"
      >
        <view class="slot-content">
          <text class="empty-text">空</text>
        </view>
      </view>
    </view>
    
    <!-- 物品详情 -->
    <view class="item-details" v-if="selectedItemInfo">
      <view class="detail-header">
        <text class="detail-icon">{{ selectedItemInfo.icon }}</text>
        <view class="detail-info">
          <text class="detail-name">{{ selectedItemInfo.name }}</text>
          <text class="detail-type">{{ getTypeName(selectedItemInfo.type) }}</text>
        </view>
      </view>
      <view class="detail-content">
        <text class="detail-description">{{ selectedItemInfo.description }}</text>
        <view class="detail-stats">
          <view class="stat-row">
            <text class="stat-label">数量：</text>
            <text class="stat-value">{{ selectedItemInfo.count }}</text>
          </view>
          <view class="stat-row">
            <text class="stat-label">价值：</text>
            <text class="stat-value">{{ selectedItemInfo.value }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'InventoryPage',
  props: {
    inventory: {
      type: Array,
      default: () => []
    },
    maxSlots: {
      type: Number,
      default: 20
    },
    currentFilter: {
      type: String,
      default: 'all'
    },
    selectedItem: {
      type: Number,
      default: null
    },
    selectedItemInfo: {
      type: Object,
      default: null
    }
  },
  
  computed: {
    filteredItems() {
      if (this.currentFilter === 'all') {
        return this.inventory
      }
      return this.inventory.filter(item => item.type === this.currentFilter)
    },
    
    totalItems() {
      return this.inventory.reduce((total, item) => total + item.count, 0)
    },
    
    usedSlots() {
      return this.inventory.length
    },
    
    emptySlots() {
      return this.maxSlots - this.usedSlots
    },
    
    inventoryValue() {
      return this.inventory.reduce((total, item) => total + (item.value * item.count), 0)
    }
  },
  
  methods: {
    setFilter(filter) {
      this.$emit('set-filter', filter)
    },
    
    selectItem(item, index) {
      this.$emit('select-item', item, index)
    },
    
    useItem(item) {
      this.$emit('use-item', item)
    },
    
    dropItem(item, index) {
      this.$emit('drop-item', item, index)
    },
    
    getTypeName(type) {
      const typeNames = {
        'resources': '资源',
        'tools': '工具',
        'food': '食物'
      }
      return typeNames[type] || type
    }
  }
}
</script>

<style scoped>
.inventory-page {
  padding: 20rpx;
}

.page-header {
  text-align: center;
  margin-bottom: 30rpx;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.page-subtitle {
  font-size: 24rpx;
  color: #666;
  display: block;
}

.inventory-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
  background: white;
  padding: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 32rpx;
  font-weight: bold;
  color: #667eea;
  display: block;
}

.stat-label {
  font-size: 22rpx;
  color: #666;
  display: block;
  margin-top: 8rpx;
}

.filter-tabs {
  display: flex;
  margin-bottom: 20rpx;
  background: white;
  border-radius: 16rpx;
  padding: 10rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.filter-tab {
  flex: 1;
  text-align: center;
  padding: 16rpx;
  border-radius: 12rpx;
  transition: all 0.3s ease;
}

.filter-tab.active {
  background: #667eea;
  color: white;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16rpx;
  margin-bottom: 30rpx;
}

.inventory-slot {
  background: white;
  border-radius: 12rpx;
  padding: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
}

.inventory-slot.selected {
  border: 2rpx solid #667eea;
  transform: scale(1.05);
}

.slot-content {
  position: relative;
}

.item-icon {
  font-size: 32rpx;
  display: block;
  margin-bottom: 8rpx;
}

.item-name {
  font-size: 20rpx;
  color: #333;
  display: block;
  margin-bottom: 4rpx;
}

.item-count {
  font-size: 18rpx;
  color: #666;
  display: block;
  margin-bottom: 4rpx;
}

.item-value {
  font-size: 16rpx;
  color: #999;
  display: block;
}

.empty-slot {
  border: 2rpx dashed #ddd;
}

.empty-text {
  color: #999;
  font-size: 18rpx;
}

.slot-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(102, 126, 234, 0.9);
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slot-actions {
  display: flex;
  gap: 10rpx;
}

.action-btn {
  padding: 8rpx 16rpx;
  border: none;
  border-radius: 8rpx;
  font-size: 18rpx;
  color: white;
}

.use-btn {
  background: #27ae60;
}

.drop-btn {
  background: #e74c3c;
}

.item-details {
  background: white;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.detail-header {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.detail-icon {
  font-size: 40rpx;
  margin-right: 16rpx;
}

.detail-info {
  flex: 1;
}

.detail-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
}

.detail-type {
  font-size: 20rpx;
  color: #666;
  display: block;
  margin-top: 4rpx;
}

.detail-content {
  margin-top: 16rpx;
}

.detail-description {
  font-size: 22rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 16rpx;
}

.detail-stats {
  border-top: 1rpx solid #f0f0f0;
  padding-top: 16rpx;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 20rpx;
  color: #666;
}

.stat-value {
  font-size: 20rpx;
  color: #333;
  font-weight: bold;
}
</style>
